<template>
  <div class='footer h-100 p-f-xl-yb w-per-100'>
    <article class='d-f h-100'>
        <section v-for='item in tabs' :key='item.value' class='f-c f-1 h-80' :class='item.value === tab ? "bg-color-fff c-666" : ""' @click='emits("tab", item.value === tab ? "" : item.value)'>{{ item.value }}</section>
    </article>
  </div>
</template>

<script setup>
const props = defineProps(['tab'])
const emits = defineEmits(['tab'])
// 要分6个类别
// 1】
// 2】
// 3】
// 4】
// 5】
// 6】
const tabs = [
    { value: '心动精选' },
    { value: '美妆保健' },
    { value: '好吃好喝' },
    { value: '妈咪之选' },
    // { value: '服饰运动' },
    { value: '鞋服饰品' },
    { value: '家庭必备' },
]
</script>

<style scoped>
.footer {
    background: #e99eab;
    color: #fff;
    font-size: 20px;
    border-top: 1px solid #ccc;
}
section {
    border: 1px solid #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    transition: all ease .4s;
}
section:first-child {
    border-bottom-left-radius: 0;
}
section:last-child {
    border-bottom-right-radius: 0;
}
</style>